<!DOCTYPE html>
<!-- saved from url=(0057)http://127.0.0.1:8020/Calc/index.html?__hbt=1587715568095 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>社保计算</title>
		<script src="./社保计算_files/jquery.min.js.下载"></script>
		<script src="./社保计算_files/bootstrap.min.js.下载"></script>
		<link rel="stylesheet" href="./社保计算_files/bootstrap.min.css">
		<script>
			//JavaScript代码
			function calc(){
				//1.从文本框里取工资(定位到文本框--取其值)
				salary = $("#sal").val();//"6000"
				salnum = parseInt(salary);//把"6000"变成6000
				//2.计算
				ylgr = salnum * 0.08;//个人缴纳的养老保险
				ylgs = salnum * 0.2;//公司缴纳的养老保险
				
				ybgr = salnum * 0.02;//个人缴纳的医保
				ybgs = salnum *0.06;//公司缴纳的医保
				
				syegr = salnum * 0.005;//失业--个人
				syegs = salnum * 0.015;//失业--公司
				
				gsgs = salnum * 0.005;//工伤--公司
				
				syugs = salnum * 0.008;//生育--公司
				
				gjjgr = salnum * 0.12;//公积金--个人
				gjjgs = salnum * 0.12;//公积金--公司
				
				grhj = ylgr + ybgr + syegr + gjjgr;//个人合计
				gshj = ylgs + ybgs + syegs + gsgs + syugs + gjjgs;//公司合计
				
				zonge = salnum + gshj;
				
				
				
				//3.把计算结果放到相应的单元格内(定位到某单元格--往里面放计算结果)
				$("#ylgr").html(ylgr);
				$("#ylgs").html(ylgs);
				
				$("#ybgr").html(ybgr);
				$("#ybgs").html(ybgs);
				
				$("#syegr").html(syegr);
				$("#syegs").html(syegs);
				
				$("#gsgs").html(gsgs);
				
				$("#syugs").html(syugs);
				
				$("#gjjgr").html(gjjgr);
				$("#gjjgs").html(gjjgs);
				
				$("#grhj").html(grhj);
				$("#gshj").html(gshj);
				
				$("#zonge").html(zonge);
			}
		</script>
	</head>
	<body>
		<!--
        	table是表格，tr是行，td是列,colspan="3"是跨三列
        -->
		<table class="table table-bordered">
			<tbody><tr class="text-center">
				<td>工资</td>
				<td colspan="3">
					<!--文本框-->
					<input class="form-control" placeholder="请输入个人工资" type="text" id="sal">
				</td>
				<td>
					<!--按钮，当被点击的时候调用函数calc（）-->
					<button onclick="calc()" class="btn btn-danger btn-block">计算</button>
				</td>
			</tr>
			<tr class="text-center bg-primary">
				<td>险种</td>
				<td>个人%</td>
				<td>个人</td>
				<td>公司%</td>
				<td>公司</td>
			</tr>
			<tr class="text-center">
				<td>养老</td>
				<td>8%</td>
				<td id="ylgr"></td>
				<td>20%</td>
				<td id="ylgs"></td>
			</tr>
			<tr class="text-center">
				<td>医保</td>
				<td>2%</td>
				<td id="ybgr"></td>
				<td>6%</td>
				<td id="ybgs"></td>
			</tr>
			<tr class="text-center">
				<td>失业</td>
				<td>0.5%</td>
				<td id="syegr"></td>
				<td>1.5%</td>
				<td id="syegs"></td>
			</tr>
			<tr class="text-center">
				<td>工伤</td>
				<td></td>
				<td id="gsgr"></td>
				<td>0.5%</td>
				<td id="gsgs"></td>
			</tr>
			<tr class="text-center">
				<td>生育</td>
				<td></td>
				<td id="syugr"></td>
				<td>0.8%</td>
				<td id="syugs"></td>
			</tr>
			<tr class="text-center">
				<td>公积金</td>
				<td>12%</td>
				<td id="gjjgr"></td>
				<td>12%</td>
				<td id="gjjgs"></td>
			</tr>
			<tr class="text-center">
				<td>合计</td>
				<td>个人合计</td>
				<td id="grhj"></td>
				<td>公司合计</td>
				<td id="gshj"></td>
			</tr>
			<tr class="text-center">
				<td>总额</td>
				<td colspan="4" id="zonge"></td>
			</tr>
		</tbody></table>
	

</body></html>